<template>
    <div>
        <userNav></userNav>
    <div class="box">
      
        <!-- <h2>欢迎来到个人中心</h2> -->
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>{{"普通用户"}}</span>
  </div>
  <el-upload
  action="http://192.168.134.47:8889/upImg" 
  :before-upload="beforeAvatarUpload"
  file-list:array
  :on-success="handleAvatarSuccess"
  name="myFile"
  :data="datas"

   
 >
 <!-- 头像部分 -->
  <img  class="i" :src="'http://localhost:8889'+'/'+this.mySelf[0].imgSrc+'.jpg'" title="点击修改用户头像"/>
</el-upload>

  <div v-for="item in mySelf" :key="item.id" class="text item">
           <div>电话号码：<el-tag>{{ item.phone }}</el-tag></div>
           <div>昵称：<el-tag>{{ item.name }}</el-tag></div>
           <div>账号：<el-tag>{{ item.user }}</el-tag></div>
           <div>密码：<el-tag>{{ item.password }}</el-tag></div>
           <div>用户状态：<el-tag>{{ item.state }}</el-tag></div>
           <div>你的喜好：<el-tag>{{ item.like }}</el-tag></div>
           <div>注册日期：<el-tag>{{ item.date }}</el-tag></div>
           <div class="change" >
            <!-- <el-button style="float: right; padding: 6px 0; margin-left: 20px;"  type="danger">修改密码</el-button> -->
           <el-button style="float: right; padding: 6px 0" type="primary" @click="show">修改信息</el-button></div>
           
  </div>
</el-card>
<el-dialog
  title="编辑用户信息"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <div>
  <table  v-for="item in mySelf" :key="item.id">
    <tr >
        <td>用户昵称:</td>
        <td><el-input v-model="item.name"></el-input>   </td>
    </tr>
    <tr  >
        <td>用户电话:</td>
        <td><el-input v-model="item.phone"></el-input>   </td>
    </tr>
    <tr>
        <td>用户账号:</td>
        <td><el-input v-model="item.user"></el-input>   </td>
    </tr>
    <tr>
        <td>用户密码:</td>
        <td><el-input v-model="item.password"></el-input>   </td>
    </tr>
    <tr>
        <td>用户爱好:</td>
        <td><el-input v-model="item.like"></el-input>   </td>
    </tr>

  </table>
  </div>
  

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update" >确 定</el-button>
  </span>
</el-dialog>
     
    </div>
    </div>
     
</template>

<script>
import userNav from "../views/userNav.vue"
export default{

    components:{
        userNav
    },
       data(){
         return{
              
              mySelf:[],
              like:"",
              user:"",
              names:"",
              phone:"",
              password:"",
              dialogVisible:false,
              datas:{
                 id:JSON.parse(window.localStorage.getItem("user"))[0].id   
              }
         }
       }
       ,

     created(){
        this.mySelf=JSON.parse(localStorage.getItem("user"))
           this.names=JSON.parse(localStorage.getItem("user"))[0].id 
          
        //    console.log(this.mySelf)
       }
       ,
     
       methods:{
      
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // console.log(res)
        // console.log("hh")
        window.localStorage.removeItem("user")
      
        //  window.localStorage.removeItem("user")
        // this.mySelf=[]
          this.update()
       
         
      }
      
     ,

        beforeAvatarUpload(file) {
         
       
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }

 
        ,
          show(){
             this.dialogVisible=true
          },
          update(){
            this.$axios({
             url:this.$host+"/updatePerson",
             method:"get",
             params:{
                person:this.mySelf
         
             }
        }).then(resp=>{
            localStorage.setItem("user",JSON.stringify(resp.data))
              this.dialogVisible=false
        })
          }
       
       }
     
}

</script>

<style scoped>
/* h2{
     color: blue;
     position: relative;
     left: 48px;
     bottom: -50px;
} */
img{
   width: 60px;
   height: 60px;
}
.box{
    margin-top: 120px;
}
.box-card{

   margin: auto;
    width: 860px;
    height: 400px;

}
.change{
 /* margin-right: 160px; */
   margin-right: 20px;
}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }


</style>